<template>
    <div>
        <div class="container">
            <span class="more">更多&nbsp;&nbsp;<a-icon type="right-circle"/></span>
            <p class="nameTi">{{title}}</p>
            <div class="mmmm">
                <router-link tag="div" :to="'CourseDetail?courseId='+item.courseId" v-for="(item,index) in list" class="imnh" :key="index">
                    <div class="box"><img :src="item.coverFileUrl" alt=""></div>
                    <p>{{item.courseTitle}}</p>
                    <p><span>共{{item.participationsCount}}节课</span>&nbsp;|&nbsp;<span>{{item.learningNum}}人报名</span></p>
                    <div class="mianfei" v-if="item.isFree==1">
                        <p class="freeClass">免费</p>
                    </div>
                    <div class="freeClass" v-else>
                        <span>{{item.payPrice}}</span>
                        <del>{{item.coursePrice}}</del>
                        <p class="freeTop" style="color: #fa8c16;">{{item.discountDesc}}</p>
                    </div>

                </router-link>
            </div>




        </div>
    </div>
</template>

<script>

    import {getCourses} from "../api/api"

    export default {
        name: "Courses.vue",
        data() {
            return {
                list: [],
                book: []
            }
        },
        props: ["title", "kind", "pageSize"],
        created() {
            console.log(this.kind)
            getCourses(this.kind, this.pageSize, 1).then(res => {
                console.log(res)
                this.list = res.rows;


            });

        }
    }
</script>

<style scoped lang="less">
    .container {

        width: 1200px;
        margin: 50px auto;
    }

    .more {
        float: right;

    }

    .nameTi {
        text-align: center;
        font-size: 24px;
        border-bottom: 3px solid #eaeaea;
    }

    .imnh img {
        width: 224px;
        height: 123px;
    }

    .imnh {
        width: 20%;
        padding-top: 10px;

        p {
            margin: 0px;
        }
    }

    .imnh img:hover {
        width: 240px;
        height: 134px;
        transition: all 1s;

    }

    .box {
        width: 224px;
        height: 123px;
        overflow: hidden;
        text-align: center;
    }

    .mmmm {
        display: flex;
        flex-wrap: wrap;
    }

    .freeClass {
        span {
            margin-right: 10px;
            color: #ff4500;
            font-size: 16px;
        }
        p {
            float: right;
            width: 66px;
            height: 20px;
            margin-right: 16px;
            text-align: center;
            line-height: 20px;
            background-color: #FFF7E6;
            border: 1px solid #f3d7a4;
        }
    }
    .mianfei {
        color: #00CF8C;
        font-size: 16px;
    }
</style>